<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/reset.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="css/lobby.css" />
<link rel="stylesheet" type="text/css" href="css/jquery.alerts.css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.simplemodal-1.3.5.js"></script>
<script type="text/javascript" src="js/jquery.cookie.js"></script>
<script type="text/javascript" src="js/jquery.validate.js"></script>
<script type="text/javascript" src="js/jquery.alerts.js"></script>
<script type="text/javascript" src="js/niftyplayer.js"></script>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script type="text/javascript" src="js/ajax.js"></script>
<script type="text/javascript" src="js/script.js"></script>
<script type="text/javascript" src="js/lobby.js"></script>
<title>Acquire Lobby</title>
</head>
<body>

	<div id="container">
		<div id="header">
			<h1>Acquire Lobby</h1>
			<p id="options"><a href="#" onclick="processUserOptions()">Info</a></p>
			<p id="viewHallOfFame"><a href="#" onclick="processHallOfFame()">Hall Of Fame</a></p>
			<p id="postOnWall"><a href="#" onclick="postOnWall()">Post on wall</a></p>
		</div>
		<div id="mainContent">
			<div id="roomList">
				<div id="tableWrapper">
					<div>
						<table id="roomsTable">
							<thead>
								<tr><th>Room Name</th><th>Game Size</th><th>Currently Waiting</th></tr>
							</thead>
							<tbody id="rooms">	
							</tbody>
						</table>
					</div>
				</div>
			</div>

			<div id="rightPanel">
				<div id="roomInfo">
					<h3>Room Info</h3><p><a id="joinRoom" href="#" onclick="joinRoom()">Join Room</a></p>
					<div id="currentRoom">
					</div>
				</div>
				<div id="createRoom">
					<h3> Create a New Room </h3>
					<form id="createRoomForm" action="#" method="post">
						<p class='formText'>
							<label>Room Name :</label>
						    <input type="text" id="roomName" name="roomName"/>
						</p>
						<p class='formText'>
							<label>Number Of Players (2-6) : </label>
							<input type="text" id="roomSize" name="roomSize" />
						</p>
						<p class='formText'> <a href="#" onclick="$('#createRoomForm').submit()">Create and Join</a></p>
					</form>
				</div>
			</div>
		</div>
	</div>
	
	<div id="userDetails">
		<div id="userDetailsHeader">
			<h1>Account Information</h1>
			<p id="options"><a href="#" onclick="$.modal.close()">Close</a></p>
		</div>
		<div id="userDetailsContent">
			<p id="userRankWrap" class='formText'>
				<label> Rank: </label>
				<span id="userRank"></span>
			</p>
			<hr/>
			<div id="gameHistory">
				<h2>Game History</h2>
				<div id="gameHistoryTableWrapper">
					<table>
						<thead>
							<tr>
								<th>Rivals</th>
								<th>Score change</th>
								<th>Date</th>
							</tr>
						</thead>
						<tbody id="gameHistoryTableBody"></tbody>
					</table>
				</div>
			</div>
		</div>	
	</div>
	
	<div id="hallOfFame">
		<h1>Hall Of Fame</h1>
		<p id="options"><a href="#" onclick="$.modal.close()">Close</a></p>
		<div id="hallOfFameTableWrapper">
			<table>
				<thead>
					<tr>
						<th></th>
						<th>Name</th>
						<th>Score</th>
					</tr>
				</thead>
				<tbody id="hallOfFameTableBody"></tbody>
			</table>
		</div>
	</div>
	
	<object id="soundPlayer" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" width="0" height="0" >
		<param name=movie value="flash/niftyplayer.swf" />
		<embed src="flash/niftyplayer.swf" width="0" height="0" name="soundPlayer" type="application/x-shockwave-flash" swLiveConnect="true" pluginspage="http://www.macromedia.com/go/getflashplayer />
	</object>
	
	

</body>
</html>